<template>
  <div class="containers">
    <commonHeader 
      :listOne="listOne" 
      :listTwo="listTwo" 
      :listThree="listThree"
      @logout="logout"
    />
    <CommonSearch 
      :searchHistory="searchHistory" 
      :searchRecordTwo="searchRecordTwo"
      @search="search"
      @deleteSearchHistory="deleteSearchHistory"
      @inputFocus="inputFocus"
    />
    <div class="content">
      <HomeMenu :allMenuList="allMenuList"/>
      <Exhibition/>
    </div>
    <HomeMovie :movieList="movieList"/>
    <HomeStay :cityList="cityList" :homeStay="homeStay"/>
    <HomeLike :brand="brand"/>
  </div>
</template>

<script>
import search from '../../mixin/search'
import { mapActions, mapState } from 'vuex'
import Exhibition from './components/exhibition'
import commonHeader from '../Common/commonHeader'
import CommonSearch from '../Common/commonSearch'
import HomeMenu from './components/menu'
import HomeMovie from './components/movie'
import HomeStay from './components/homeStay'
import HomeLike from './components/like'
export default {
  name: 'Home',
  mixins: [search],
  data() {
    return {
      /** 两个菜单列表的对象 */
      allMenuList: {},
      /** 电影数组 */
      movieList: [],
      /** 放城市的数组 */
      cityList: [],
      /** 存放和城市对应的信息的数据 */
      homeStay: [],
      /** 品牌 */
      brand: []
    }
  },
  async mounted() {
    let res = await this.$api.test()
    this.getMenu()
    this.getOtherData()
  },
  methods: {
    ...mapActions(['clearUserInfomation']),
   /** 提示 */
    messageTips(type, msg) {
      this.$Message[type]({
        background: true,
        content: msg
      })
    },
    /** 获取菜单数据 */
    async getMenu() {
      let res = await this.$api.getMenu()
      this.allMenuList = res.data[0]
    },
    /** 获取首页其他数据 */
    async getOtherData() {
      let res = await this.$api.queryOtherData()
      this.movieList = res.data.movie
      res.data.homeStay.forEach((item, index) => {
        index === 0 ? this.cityList.push({
          city: item.city,
          hover: true
        }) : this.cityList.push({
          city: item.city,
          hover: false
        })
      })
      this.homeStay = res.data.homeStay
      res.data.brand.forEach(item => {
        item.straCount =  Number(item.straCount)
      })
      this.brand = res.data.brand
    }
  },
  components: {
    commonHeader,
    CommonSearch,
    HomeMenu,
    Exhibition,
    HomeMovie,
    HomeStay,
    HomeLike
  }
}
</script>

<style lang="scss" scoped>
.containers {
  width: 100%;
  height: 100%;
  background: #F8F8F8;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .content {
    width: 1199px;
    margin: 0 auto;
  }
}
</style>